<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素内容</title>
</head>
<body>
<input type="text" id="username" name="username" placeholder="请输入您的用户名" class="dd"> <br>
<input type="password" id="password" name="password" placeholder="请输入您的密码" class="dd">
<p class="vv">这是一段文本</p>
<h1 class="vv">这是一个标题</h1>
<hr>
<button onclick="demo01()">通过ID获取元素值</button>
<button onclick="demo02()">通过元素的Name属性获取元素值</button>
<button onclick="demo03()">通过根元素的名称来获取所有指定名称的元素值</button>
<button onclick="demo04()">通过class属性获取元素内容</button>
</body>
<script>

    function demo04() {
        //获取到整个元素对象
        var obj = document.getElementsByClassName("dd")
         //循环遍历
        for (var i = 0; i < obj.length; i++) {
            console.log(obj[i].value)
        }

        //获取到整个元素对象
        var obj2 = document.getElementsByClassName("vv")
         //循环遍历
        for (var i = 0; i < obj2.length; i++) {
            console.log(obj2[i].innerHTML)
        }

    }


    //方式三：通过根元素的名称来获取所有指定名称的元素值
    function demo03() {
        //获取到整个元素对象
        var obj = document.getElementsByTagName("input") //列表
        //循环遍历
        for (var i = 0; i < obj.length; i++) {
            console.log(obj[i].value)
        }
    }

    //方式二：通过元素的Name属性获取元素值
    function demo02() {
        //获取到整个元素对象
        var obj = document.getElementsByName("username")[0]
        console.log(obj)
        // 获取元素中的值
        alert(obj.value)
        //修改元素中的值
        obj.value = "宋红桥"
    }

    // 方式一：通过ID获取输入框中的值
    function demo01() {
        //获取到整个元素对象
        var obj = document.getElementById("username")
        // 获取元素中的值
        alert(obj.value)
        //修改元素中的值
        obj.value = "宋红桥"
    }
</script>
</html>